<template>
    <div class="box">
        <div class="top">猜你喜欢</div>
        <div class="sortbox">
            <span>综合排序</span>
            <span>距离最近</span>
            <span>销量最高</span>
            <span>筛选<span class="iconfont icon-shaixuan"></span></span>
        </div>
        <div class="tabbar">
            <span>年货节热卖</span>
            <span>津贴联盟</span>
            <span>满减优惠</span>
            <span>品质联盟</span>
        </div>
    </div>

</template>
  
<script>
export default {
    name: 'App'

}
</script>
  
  
<style scoped>
.box {
    box-sizing: border-box;
    height: 120px;
    width: 100%;
    padding:0px 10px;
}

.box .top {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
}

.box .sortbox,.tabbar{
display: flex;
justify-content: space-between;
}
.box .sortbox span {
  padding: 5px 13px;
}
.box .sortbox .iconfont {
  padding: 5px 0px;
}
.box .tabbar span {
    font-size: 13px;
  padding: 5px 10px;
  background-color: #f3f3f3;
}
</style>